<template>
	<view class="comp-switch-tab">
		<view class="tab-item" v-for="(item,index) in list" :key="index" :class="{active:current===index}" @tap="onTapItem(index)">
			<text class="tab-item-text">{{item}}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits,
	} from "vue";
	const emit = defineEmits(['change', 'update:current']);

	const props = defineProps({
		current: {
			type: Number,
			default: 0
		},
		list: {
			type: Array,
			default: () => ([])
		}
	});

	const onTapItem = (index) => {
		if (index !== props.current) {
			emit('change', index)
			emit('update:current', index)
		}
	}
</script>

<style lang="scss" scoped>
	.comp-switch-tab {
		border-radius: 100px;
		background: rgba(229, 229, 229, 1);
		padding: 2px 2px 2px 2px;
		display: flex;

		.tab-item {
			height: 37px;
			padding: 8px 16px 8px 16px;
			border-radius: 100px;
			box-sizing: border-box;
			line-height: 1;

			.tab-item-text {
				/** 文本1 */
				font-size: 14px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 21px;
				color: rgba(166, 166, 166, 1);
			}

			&.active {
				background: rgba(255, 255, 255, 1);

				.tab-item-text {
					font-weight: bold;
					color: rgba(69, 145, 230, 1);

				}
			}
		}

	}
</style>